
<!DOCTYPE html>
<html>
<head>
    <title>Image ArcGIS MapServer</title>
    <link href="${ctx!}/static/css/ol.css" rel="stylesheet">
    <script src="${ctx!}/static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${ctx!}/static/js/ol.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
</head>
<body>


<div id="baiduMap2" style="width: 100%"></div>
<script src="${ctx!}/static/js/common/param.js" type="text/javascript" charset="utf-8"></script>
<script>

    // 自定义分辨率和瓦片坐标系
    var resolutions = [];
    var maxZoom = 18;

    // 计算百度使用的分辨率
    for(var i=0; i<=maxZoom; i++){
        resolutions[i] = Math.pow(2, maxZoom-i);
    }
    var tilegrid  = new ol.tilegrid.TileGrid({
        origin: [0,0],    // 设置原点坐标
        resolutions: resolutions    // 设置分辨率
    });



    // 创建百度地图的数据源
    var baiduSource = new ol.source.TileImage({
        projection: 'EPSG:3857',
        tileGrid: tilegrid,
        tileUrlFunction: function(tileCoord, pixelRatio, proj){
            var z = tileCoord[0];
            var x = tileCoord[1];
            var y = tileCoord[2];

            // 百度瓦片服务url将负数使用M前缀来标识
            if(x<0){
                x = 'M' + (-x);
            }
            if(y<0){
                y = 'M' + (-y);
            }

            return map_baidu_url+"?qt=tile&x="+x+"&y="+y+"&z="+z+"&styles=pl&udt=20170301&scaler=1&p=1";
        }
    });

    // 百度地图层
    var baiduMapLayer2 = new ol.layer.Tile({
        source: baiduSource
    });




    var vectorSource = new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        loader: function(extent, resolution, projection) {  //加载函数
//           var url = 'http://localhost:8080/geoserver/timeseries/ows';
            var url =map_geoserver_url+'?service=WFS&' +
                'version=1.0.0&request=GetFeature&' +
                'typename=sy_times_data:v6_time_pref_pgn_gbk_wgs84&' +
                'cql_filter=beg_yr<1127 and end_yr>1127&' +
                'outputFormat=text/javascript&' +
                'format_options=callback:loadFeatures';
            $.ajax({
                    url: url,
//                 data : $.param(wfsParams),   //传参
                type : 'GET',
                dataType: 'jsonp',   //解决跨域的关键
                jsonpCallback:'loadFeatures'  //回调

        });
        },
        strategy: ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({
            maxZoom: 20
        })),
        projection: 'EPSG:4326'
    });
    //回调函数使用
    window.loadFeatures = function(response) {
//        vectorSource.addFeatures((new ol.format.GeoJSON()).readFeatures(response));  //载入要素
        //坐标转换，将返回的数据的坐标转换到当前使用地图的坐标系，否则，无法正常显示
        vectorSource.addFeatures((new ol.format.GeoJSON()).readFeatures(response,{
            dataProjection: 'EPSG:4326',    // 设定JSON数据使用的坐标系
            featureProjection: 'EPSG:3857' // 设定当前地图使用的feature的坐标系
        }));  //载入要素

    };

    // 创建layer使用的style function，根据feature的自定义type，返回不同的样式
    var layerStyleFunction = function(feature, resolution) {
        var type = feature.get('type');
        var style = null;
        // 点
        if (type === 'point') {
            style = new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 1,
                    fill: new ol.style.Fill({
                        color: 'red'
                    })
                })
            });
        } else if ( type === 'circle') { // 圆形
            style = new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 10,
                    stroke: new ol.style.Stroke({
                        color: 'red',
                        size: 1
                    })
                })
            });
        } else { // 其他形状
            <!-- style = new ol.style.Style({ -->
            <!-- image: new ol.style.RegularShape({ -->
            <!-- points: 5, -->
            <!-- radius: 10, -->
            <!-- fill: new ol.style.Fill({ -->
            <!-- color: 'blue' -->
            <!-- }) -->
            <!-- }) -->
            <!-- }); -->

            style=new ol.style.Style({
                fill: new ol.style.Fill({ //矢量图层填充颜色，以及透明度
                    color: 'rgba(255, 255, 255, 0.1)'
                }),
                stroke: new ol.style.Stroke({ //边界样式
                    color: '#FF0000',
                    width: 10
                }),
                text: new ol.style.Text({ //文本样式
                    font: '12px Calibri,sans-serif',
                    fill: new ol.style.Fill({
                        color: '#000'
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#fff',
                        width: 3
                    })
                })
            })
        }

        // 返回 style 数组
        return [style];
    };


    var style=new ol.style.Style({
        fill: new ol.style.Fill({ //矢量图层填充颜色，以及透明度
            color: 'rgba(0, 255, 255, 0.1)'
        }),
        stroke: new ol.style.Stroke({ //边界样式
            color: '#319FD3',
            width: 1
        }),
        text: new ol.style.Text({ //文本样式
            font: '12px Calibri,sans-serif',
            fill: new ol.style.Fill({
                color: '#000'
            }),
            stroke: new ol.style.Stroke({
                color: '#fff',
                width: 3
            })
        })
    })
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style:layerStyleFunction
    });


    // 创建地图
    new ol.Map({
        layers: [
            baiduMapLayer2,
            vectorLayer
        ],
        view: new ol.View({
            // 设置成都为地图中心
            center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),
            zoom: 10
        }),
        target: 'baiduMap2'
    });
</script>
</body>

</html>